<template>
  <div class="tools-project-control">
    <el-container>
      <el-aside width="150px"> <ControlTools @setTerminal="setTerminal" /></el-aside>
      <el-container>
        <el-header height="auto"> <ControlForm :form="form" /></el-header>
        <el-main> <Terminal ref="terminalRef" /></el-main>
        <el-footer>
          <div class="tools-project-control-btns align-right">
            <el-button type="primary" @click="getFileContents">保存</el-button>
            <el-button @click="resetTerminal">重置</el-button>
          </div></el-footer
        >
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { defaultConfig } from './config'
import ControlForm from './components/ControlForm.vue'
import ControlTools from './components/ControlTools.vue'
const terminalRef = ref<any>(null)

const form = reactive({
  filePath: defaultConfig.basePath,
  name: '',
  env: 'dev',
  customer: ''
})
onMounted(() => {
  if (terminalRef.value) {
    setTimeout(() => {
      terminalRef.value.terminalSend(`cd ${defaultConfig.basePath}`)
    }, 500)
  }
})
const getFileContents = async () => {
  if (terminalRef.value) {
    terminalRef.value.terminalSend('ls -l')
  }
}
const resetTerminal = () => {
  terminalRef.value.terminalClear()
}
const setTerminal = (type: string) => {
  switch (type) {
    case '1':
      if (terminalRef.value) {
        terminalRef.value.terminalSend(`cd ${defaultConfig.basePath + '/' + form.name}`)
        terminalRef.value.terminalSend(`pnpm run serve `)
      }
      break
  }
}
</script>

<style lang="scss" scoped>
.tools-project-control {
  height: 100%;
  .el-container {
    height: 100%;
  }
  .tools-project-control-textarea {
    margin-top: 14px;
  }
  .el-aside {
    border-right: 1px solid #eee;
  }
}
</style>
